<template>
  <div class="person">
    <h2>情况2：监听【ref】定义的【对象】类型的数据</h2>
    <h3>姓名：{{ person.name }}</h3>
    <h3>年龄：{{ person.age }}</h3>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {ref,watch} from 'vue';
    //数据
    let person=ref({
      name:"沐七",
      age:18
    })

    //方法
    function changeName(){
      person.value.name+="~"
    }
    function changeAge(){
      person.value.age+=1
    }
    function changePerson(){
      person.value={name:"沐玖",age:20}
    }

    //监视
    //监视ref定义的对象类型数据，监视的是对象的地址值
    //扩展来说说就是监视的是整个对象，并非其中的某个属性，所以方法1.2调用并不触发监视
    //只有方法3会触发，因为它修改了整个对象（直接换了个
    /*watch(person,(newValue,oldValue)=>{
      console.log("person变化了");
    })*/
    //使用深度监视，这时候方法1,2都能触发监听，
    //使用初始化监视，这时候刚载入就会执行，因为对象会被赋初始值
    watch(person,(newValue,oldValue)=>{
      console.log("person变化了");
    },{deep:true,immediate:true})

</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>